<template>
    <div class="write-item">
        <div class="header">
            <div class="left-info">
                <div class="avatar">
                    <image class="default" v-if="!data.createByAvatar" src="@/static/mine_default_avatar.png"/>
                    <image class="real" v-else :src="data.createByAvatar"/>
                </div>
                <div class="user">
                    <text class="name">{{data.createByNickName}}</text>
                    <text class="time" v-if="mode != 'preview'">{{data.createTime}}</text>
                </div>
            </div>
            <div v-if="!['preview', 'detail'].includes(mode) && data.isTop" class="top-btn">置顶</div>
        </div>
        <div class="part" v-for="(item, index) in data.contentList" :key="index">
            <text class="part-label">{{ item.mainTitle }}</text>
            <div class="list">
                <template v-for="(part) in item.list" >
                    <div class="list-item" v-if="part.content || part.imageUrl" :key="part.title">
                        <text class="title">{{part.title}}</text>
                        <image v-if="part.imageUrl" class="cover" @click.stop="toPreview(part)" :src="part.imageUrl"/>
                        <div class="content">
                            <rich-text class="rich" :nodes="formatContent(part.content)"></rich-text>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="gps-time" :class="{bottom30: ['preview', 'detail'].includes(mode)}">
            <text class="name">{{data.centerName}}</text>
            <text class="time">考试日期：{{data.examDate}}</text>
        </div>
        <div class="handler bottom30" v-if="!['preview', 'detail'].includes(mode)" @click.stop>
            <view class="icon-item">
                <button open-type="share" class="share-btn" :data-id="data.id" :data-type="starType" @click.stop="addShare">
                    <image class="" src="@/static/icon-share.png"></image>
                </button>
                {{formatNum(data.shares)}}
            </view>
            <view class="icon-item" @click="$emit('to-detail', data, 'comment')">
                <image class="" src="@/static/icon-comment.png"></image>
                {{formatNum(data.comments)}}
            </view>
            <view class="icon-item" @click="handleStar">
                <image v-if="!data.isLike" class="" src="@/static/icon-star.png"></image>
                <image v-else class="" src="@/static/icon-star-active.png"></image>
                {{formatNum(data.likes)}}
            </view>
        </div>
    </div>
</template>

<script>
    import {apiLike, apiAddShares} from '@/api/memory'
    export default {
        props: {
            mode: { // 预览模式
                default: 'all',
                type: String
            },
            listData: { // 回忆数据
                default: () => ({}),
                type: Object
            },
            starType: { // 区分笔试和机试
                default: '',
                type: Number | String
            }
        },
        data(){
            return {
                data: {},
                scene: ''

            }
        },
        watch: {
            listData: {
                deep: true,
                immediate: true,
                handler(val){
                    if(Object.keys(val).length){
                        this.formatData()
                    }
                }
            }
        },
        created() {
            this.scene = wx.getLaunchOptionsSync().scene
        },
        methods: {
            // 增加分享数
            addShare(){
                apiAddShares({ 
                    id: this.data.id
                }).then(res => {
                    if(res.code == 200){
                        this.data.shares+=1
                    }
                }).catch(err => {
                    console.log(err, 'err')
                })
            },
            // 点赞
            handleStar(){
                // 朋友圈打开
                if(this.scene == 1154) return this.$tip.toast('请前往小程序使用完整服务')
                apiLike({ 
                    type: this.starType,
                    targetId: this.data.id,
                    isLike: this.data.isLike ? 0 : 1
                }).then(res => {
                    if(res.code == 200){
                        this.data.isLike = !this.data.isLike
                        if(this.data.isLike){
                            this.data.likes+=1
                            this.$tip.toast('点赞成功')
                        }else {
                            this.data.likes-=1
                            // this.$tip.toast('取消点赞成功')
                        }
                    }
                }).catch(err => {
                    console.log(err, 'err')
                })
            },
            // 组装页面需要展示的数据
            formatData(){
                const list = this.listData.contentList || []
                const typeMap = {
                    1: '听力',
                    2: '阅读',
                    4: '写作',
                }
                const data = {}
                list.forEach(item => {
                    for (const type in typeMap) {
                        if (item.questionType == type) {
                            if(!data[type]){
                                data[type] = {mainTitle: typeMap[type], list: [item]}
                            }else {
                                data[type].list.push(item)
                            }
                        }
                    }
                })
                this.data = {
                    ...this.listData,
                    contentList: Object.values(data)
                }
            },
            formatNum(num){
                return num > 999 ? '999+' : num
            },
            toPreview(part){
                wx.previewImage({
                    current: part.imageUrl, // 当前显示图片的http链接
                    urls: [part.imageUrl] // 需要预览的图片http链接列表
                }) 
            },
            
            // 换行处理
            formatContent(str){
                const arr = str.split('\n')
                return arr.map((item, index) => {
                    let node = `<span class='rich'>${item}</span>`
                    if(index != arr.length - 1){
                        node+= '<br/>'
                    }
                    return node
                }).join('')
            }
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@function toRem($rpx){  //$rpx为需要转换的字号
    @return #{$rpx * 100 / 750 / 4}rem; 
}
.write-item{
    width: 100%;
    background-color: #fff;
    border-radius: toRem(10);
    padding: toRem(23) toRem(20) 0;
    box-sizing: border-box;
    // margin-top: toRem(17);
    margin-bottom: toRem(20);
    .header{
        display: flex;
        align-items: flex-start;
        margin-bottom: toRem(20);
        justify-content: space-between;
        width: 100%;
        .left-info{
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
            .avatar{
                width: toRem(70);
                height: toRem(70);
                border-radius: 50%;
                margin-right: toRem(20);
                background-color: #EAEEF6;
                position: relative;
                .default{
                    width: toRem(29);
                    height: toRem(32);
                    position: absolute;
                    left:50%;
                    top:50%;
                    transform: translate(-50%,-50%);
                }
                .real{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .user{
                display: inline-flex;
                flex-direction: column;
                align-items: flex-start;
                font-size: toRem(24);
                font-weight: 400;
                color: #333;
                flex: 1;
                min-width: 0;
                .name{
                    overflow: hidden; /* 确保超出容器的文本被裁剪 */
                    white-space: nowrap; /* 确保文本在一行内显示 */
                    text-overflow: ellipsis;
                    max-width: 90%;
                }
                .time{
                    color: #999;
                }
            }
        }
        .top-btn{
            font-size: toRem(24);
            font-weight: 400;
            color: #F57878;
            padding: toRem(8) toRem(12);
            box-sizing: border-box;
            border-radius: toRem(8);
            border: toRem(2) solid #F8CBCB;
            background-color: #FFF4F4;
        }
    }
    .part{
        padding-bottom: toRem(30);
        border-bottom: toRem(1) solid #F5F5F5;
        margin-bottom: toRem(30);
        .part-label{
            border-radius: toRem(10) toRem(19) toRem(19) 0;
            background-color: #F6F6F6;
            color: #999;
            font-size: toRem(24);
            padding: toRem(10) toRem(15);
            box-sizing: border-box;
            margin-bottom: toRem(40);
            display: inline-block;
        }
        .list{
            width: 100%;
            .list-item{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: toRem(40);
                .title{
                    font-size: toRem(24);
                    color: #999;
                    margin-bottom: toRem(19);
                }
                .cover{
                    width: toRem(219);
                    height: toRem(220);
                    margin-bottom: toRem(20);
                }
                .content{
                    font-size: toRem(28);
                    color: #333;
                }
                .rich{
                    line-height: toRem(40);
                    font-size: toRem(28);
                }
                &:last-child{
                    margin-bottom: 0;
                }
            }
        }
    }
    .last{
        margin-bottom: 0;
    }
    .gps-time{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: toRem(28);
        font-size: toRem(24);
        color: #333;
        .name{
            flex: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-right: toRem(30);
        }
        .time{
            color: #999;
            font-size: toRem(20);
        }
    }
    .handler{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: toRem(30) toRem(70) 0;
        font-size: toRem(20);
        color: #999;
        .icon-item{
            display: inline-flex;
            align-items: center;

        }
        image{
            width: toRem(24);
            height: toRem(24);
            margin-right: toRem(9);
        }
    }
    .bottom30{
        padding-bottom: toRem(30);
    }
}
.share-btn{
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    background-color: rgba(0,0,0,0);
    &::after{
        border: none;
    }
}
 
</style>


